<!-- 通知管理 -->
<template>
  <div class="container-app">
    <div class="row q-col-gutter-md  q-mb-md">
      <AlarmModel class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-xs-12" />
      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
        <div class="bg-white q-pa-sm">
          <span>告警通知方式</span>
        </div>
        <q-separator />
        <SendWay />
      </div>
    </div>
    <div class="row q-col-gutter-md">
      <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
        <div  style="height: 902px; overflow: auto;" class="bg-white">
          <div class="bg-white q-pa-sm">
            <span class="cursor-pointer" :class="num===0?'text-primary': ''" @click="changeStatus(0)">资产列表</span>
            <span class="q-px-md">|</span>
            <span class="cursor-pointer" :class="num===1?'text-primary': ''" @click="changeStatus(1)">监控点位列表</span>
          </div>
          <q-separator />
          <AssetList v-if="num === 0" />
          <SiteList v-if="num === 1"/>
        </div>
      </div>
      <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
        <div>
          <div class="bg-white q-pa-sm">告警设置</div>
          <q-separator />
          <WarnSetinfo v-if="num === 0" :setAssetId="setAssetId" />
          <SiteWarnset v-if="num === 1" :setSiteId="setSiteId" />
        </div>
        <div class="q-mt-md">
          <div class="bg-white q-pa-sm">关注人员</div>
          <q-separator />
          <ConPerson :personList="personList" :setPersonId="setPersonId" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AssetList from './common/leftList/assetList'
import WarnSetinfo from './common/rightSet/warnSetinfo'
import SiteWarnset from './common/rightSet/siteWarnset'
import ConPerson from './common/rightSet/conPerson'
import SiteList from './common/leftList/siteList'

import SendWay from 'src/pages/common/sendWay'
import AlarmModel from './common/headerSet/alarmModel'
import { mapGetters } from 'vuex';
export default {
  name: 'WarnSet',
  data () {
    return {
      num: 0,
      setPersonId: 0
    };
  },

  components: {
    AssetList,
    WarnSetinfo,
    SiteWarnset,
    ConPerson,
    SiteList,
    SendWay,
    AlarmModel
  },
  computed: {
    ...mapGetters(['setAssetId', 'personList', 'setSiteId'])

  },
  watch: {
    setAssetId: {
      handler(val) {
        if (this.num === 0) {
          this.setPersonId = {
            setId: this.setAssetId,
            num: 0
          }
        }
      }
    },
    setSiteId: {
      handler(val) {
        if (this.num === 1) {
          this.setPersonId = {
            setId: this.setSiteId,
            num: 1
          }
        }
      }
    },
    num: {
      immediate: true,
      handler(val) {
        if (val === 0) {
          this.setPersonId = {
            setId: this.setAssetId,
            num: 0
          }
        } else if (val === 1) {
          this.setPersonId = {
            setId: this.setSiteId,
            num: 1
          }
        }
      }
    }
  },

  mounted() {
    // 获取人员列表
    this.$store.dispatch('site/feathPersonList')
  },

  methods: {
    changeStatus(num) {
      this.num = num
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
